<template>
  <div class="conteiner">
    <!-- 历史搜索 -->
    <div class="history">
      <div class="title">
        <span>历史搜索</span>
        <div class="icon" @click="clearSearch()">
          <Icon type="ios-trash-outline"></Icon>
        </div>
      </div>
      <div class="item">
        <span v-for="(item, index) in searchList" :key="index" @click="triggerSearch(item)">{{item}}</span>
      </div>
    </div>

    <!-- 创建流水单 -->
    <!--
    <router-link to="/createdBill" class="addLink" v-if="showButton">
      <div class="button">
        <span>创建流水单</span>
      </div>
    </router-link>
    -->

  </div>
</template>

<script>
import { Toast } from "mint-ui";
import  api from '../../assets/js/api'

export default {
  data() {
    return {
      searchList: []
    };
  },

  methods: {
    clearSearch() {
      //接口请求
      this.searchList = [];
      console.log("666");
    },

    triggerSearch(data) {
      console.log(data);
      //向父组件传递值
      this.$emit("triggerSearch", data);
    },

    /**
     * 获取搜索列表
     * @tips
     * 1. 不处理请求失败的情况
     */
    getSearchList() {
      this.axios
        .post("/api/butler/get_search_list", {})
        .then(response => {
          let res = response.data;
          if (res.code == 200) {
            this.searchList = res.data;
          }
        })

    },

    //清空搜索记录
    clearSearch() {
      let loading = this.loading("请求中", 8000);
      loading.show();
      this.axios
        .post("/api/butler/clear_search", {})
        .then(response => {
          let res = response.data;
          loading.hide();
          if (res.code == 200) {
            loading.hide();
            //清空搜索记录
            this.searchList = [];

          } else if (res.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            loading.hide();
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(error => {
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    }
  },

  props: ["showButton"],

  created() {
    this.axios.defaults.baseURL = api
    console.log(this.showButton);
    this.getSearchList();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .addLink {
    // width: 50%;
    position: fixed;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    img {
      width: 100%;
    }
  }

  .history {
    width: 90%;
    margin: 0px 5%;
    padding-top: 24px;
    font-size: 14px;

    .title {
      margin: 10px 0px;
      position: relative;
      .icon {
        position: absolute;
        right: 10px;
        top: 1px;
        padding: 0px 6px;
        // icon 太小了放大点
        .ivu-icon {
          font-size: 120%;
        }
      }
    }
  }

  .item {
    display: flex;
    flex-wrap: wrap;

    span {
      display: block;
      padding: 2px 8px;
      margin: 4px 5px;
      background-color: RGBA(242, 242, 242, 1);
      border-radius: 14px;
    }
  }

  .button {
    width: 240px;
    height: 40px;
    background: linear-gradient(
      180deg,
      rgba(255, 186, 209, 1) 0%,
      rgba(255, 132, 165, 1) 100%
    );
    border-radius: 22px;
    text-align: center;
    line-height: 40px;

    span {
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
